import React, { PropsWithChildren } from "react";
import {
  AmountItem1AmountLine,
  AmountItem1Img,
  AmountItem1Title,
  AmountItem1Unit,
  AmountItem1Wrap,
} from "./styles";
import CountUp, { CountUpProps } from "react-countup";

export interface AmountItem1Props extends PropsWithChildren {
  /**
   *  设置图片src
   */
  imgProps?: React.ImgHTMLAttributes<HTMLImageElement>;
  /**
   *  预留字段
   */
  titleProps?: React.ImgHTMLAttributes<HTMLDivElement>;
  /**
   * 标题
   */
  title?: string;
  /**
   *  金额
   */
  amount?: number;
  /**
   *  单位
   */
  unitName?: string;
  /**
   *  金额的颜色
   */
  primaryColor?: string;
  /**
   *  组件属性,预留,暂时没用
   */
  countUpProps?: CountUpProps;
}

const AmountItem1 = ({
  imgProps,
  titleProps,
  title,
  amount = 0,
  unitName,
  primaryColor = "#76ACF6",
  countUpProps,
}: AmountItem1Props) => {
  return (
    <AmountItem1Wrap>
      {imgProps && <AmountItem1Img {...imgProps} />}
      <AmountItem1Title {...titleProps}>{title}</AmountItem1Title>
      <AmountItem1AmountLine primaryColor={primaryColor}>
        <CountUp start={0} end={amount} decimals={2} {...countUpProps} />
        <AmountItem1Unit primaryColor={primaryColor}>
          {unitName}
        </AmountItem1Unit>
      </AmountItem1AmountLine>
    </AmountItem1Wrap>
  );
};

export default AmountItem1;
